<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF8">
    <title>瑞云一家</title>
</head>
<style>
    body {
        background-color: gray;
        font-size: 22px;
    }

    .inputText {
        height: 28px;
        font-size: 26px;
        line-height: 26px;
        padding-left: 15px;
        border-radius: 10px;
        background-color: #dff1f7;
        border: 2;
    }

    .inputText:focus {
        outline: none;
        background-color: #d6e4eb;
    }

    .buttonText {
        width: 100px;
        height: 40px;
        border: 1px solid #333;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        background-color: #096;
        margin: 100px auto 20px;
        box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
        transition: .2s;
        transform: scale(1);
        cursor: pointer;
    }

    .buttonText:focus {
        outline: none;
        background-color: rgb(11, 104, 73);
    }

    .buttonText:active {
        transform: scale(0.97);
    }

    .buttonText:disabled {
        background-color: rgb(11, 104, 73);
    }
</style>

<body>
    <center>
        <form>
            <table>
                <tr>
                    <td>Wifi SSID:</td>
                    <td><input type="text" class="inputText" id="SSID" placeholder="WIFI SSID"></td>
                </tr>
                <tr>
                    <td>Wifi 密码:</td>
                    <td><input type="text" class="inputText" id="PSW" placeholder="WIFI PASSWORD"></td>
                </tr>
                <tr>
                    <td>巴法云私钥:</td>
                    <td><input type="text" class="inputText" id="KEY" placeholder="USER KEY"></td>
                </tr>
                <tr>
                    <td>主题名:</td>
                    <td><input type="text" class="inputText" id="TOPIC" placeholder="TOPIC"></td>
                </tr>
                <tr>
                    <td>锅炉启动延时:</td>
                    <td><input type="text" class="inputText" id="DELAY" oninput="value=value.replace(/[^\d]/g,'')"
                            placeholder="DELAY"></td>
                            <td>秒</td>
                </tr>
            </table>
            <input id="btnsendconfig" type="button" class="buttonText" value="保存设置" onclick="config()">
            <br/> 
            <input id="btn_turnon" type="button" class="buttonText" value="打开锅炉" onclick="ctrl(this)" />
            <input id="btn_turnoff" type="button" class="buttonText" value="关闭锅炉" onclick="ctrl(this)" /> 
            <br/>       
            <label id="recvtxt" />
        </form>
       
    </center>    
</body>
<script language="javascript">
        function getHeader() {
            document.getElementById("SSID").value = this.getResponseHeader("ssid");
            document.getElementById("PSW").value = this.getResponseHeader("psw");
            document.getElementById("KEY").value = this.getResponseHeader("key");
            document.getElementById("TOPIC").value = this.getResponseHeader("topic");
            document.getElementById("DELAY").value = this.getResponseHeader("delay");
            //document.getElementById("OTAURL").value = this.getResponseHeader("ota");
        }

        window.onload = function () {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("HEAD", "/GetConfig", true);
            xmlhttp.timeout = 1000;
            xmlhttp.onload = getHeader;
            xmlhttp.send();
        };

        function config() {
            var ssid = SSID.value;
            var psw = PSW.value;
            var key = KEY.value;
            var topic = TOPIC.value;
            var delay = DELAY.value;

            if (!isNotEmptyStr(ssid)) {
                alert("请输入有效的SSID");
                return;
            }
            if (!isNotEmptyStr(psw)) {
                alert("请输入有效的Wifi密码");
                return;
            }
            if (!isNotEmptyStr(key) || key.length != 32) {
                alert("请输入有效的私钥");
                return;
            }
            if (!isNotEmptyStr(topic)) {
                alert("请输入有效的主题名");
                return;
            }
            xmlhttp.ontimeout = function () {
                document.getElementById("btnsendconfig").disabled = false;
                document.getElementById("recvtxt").innerText ="操作超时";
            }
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                document.getElementById("btnsendconfig").disabled = false;
                if (xmlhttp.readyState == 4) {
                    document.getElementById("recvtxt").innerText = xmlhttp.responseText;
                    if (xmlhttp.status == 200) {
                        alert("设置保存成功");
                    }
                    else {
                        alert("设置保存失败");
                    }
                }
            }
            xmlhttp.open("GET", "/AutoConfig?ssid=" + ssid + "&psw=" + psw + "&key=" + key + "&topic=" + topic+"&delay="+delay, true);
            xmlhttp.timeout = 1000;
            document.getElementById("btnsendconfig").disabled = true;
            xmlhttp.send();
        }

        function ctrl(sender) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    sender.disabled = false;
                    if (xmlhttp.status == 200) {
                        document.getElementById("recvtxt").innerText = "操作成功";
                    }
                    else {
                        document.getElementById("recvtxt").innerText = "操作失败";                        
                    }
                }
            }
            xmlhttp.ontimeout = function (sender) {
                document.getElementById("recvtxt").innerText = "操作超时";
                sender.disabled = false;;
            }
            xmlhttp.open("GET", "/Ctrl?btn_name=" + sender.id, true);
            xmlhttp.timeout = 5000;
            xmlhttp.send();
            sender.disabled = true;
        }
    </script>
</html>